<!--
 * @Description: 
 * @Autor: ZachGmy
 * @Date: 2021-06-24 08:41:23
 * @LastEditors: ZachGmy
 * @LastEditTime: 2021-06-24 09:31:07
-->
<template>
  <div>
    <!-- v-for的使用 要么 数据是数组 数据是对象-->
    <!-- <h2 v-for="(movie, index) in movies" :key="index">
      {{ index }} -- {{ movie }}
    </h2> -->
    <!-- 使用v-for 遍历对象数组 -->
    <!-- <h2 v-for="(item, index) in hisTod" :key="index">
      {{ item.title }}
    </h2> -->

    <!-- v-for 遍历对象 -->
    <!-- <ul>
      <li v-for="(value, key, index) in obj" :key="index">
        {{ value }}--{{ key }}--{{ index }}
      </li>
    </ul> -->

    <!-- v-model 双向数据绑定 -->
    请输入信息:<input type="text" v-model.lazy="message" />
    <div>您输入的信息是:{{ message }}</div>
    <!-- 账号：<input type="text" v-model="account" />
    <br />
    密码：<input type="password" v-model="pwd" />
    <br />
    <button @click="login">登录</button> -->
    <input type="radio" id="A" value="A" v-model="value" />
    <label for="A">A选项</label>
    <input type="radio" id="B" value="B" v-model="value" />
    <label for="B">B选项</label>
    <br />
    选择的结果是：{{ value }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 最基本的元素数组
      movies: ["唐人街探案3", "信条", "复仇者联盟", "xxxxxx", "qqqqqq"],
      // 对象数组
      hisTod: [
        {
          year: "680",
          month: "05",
          day: "06",
          title: "倭马亚王朝的创建者穆阿维叶一世逝世",
        },
        {
          year: "1397",
          month: "05",
          day: "06",
          title: "李氏朝鲜的第4代国王李祹出生",
        },
        {
          year: "1501",
          month: "05",
          day: "06",
          title: "梵蒂冈教宗马塞勒斯二世出生",
        },
        {
          year: "1536",
          month: "05",
          day: "06",
          title: "英国国王亨利八世下令翻译《圣经》",
        },
        {
          year: "1757",
          month: "05",
          day: "06",
          title: "布拉格战役普鲁士大败奥地利",
        },
        {
          year: "1757",
          month: "05",
          day: "06",
          title: "普鲁士元帅施维林逝世",
        },
        {
          year: "1862",
          month: "05",
          day: "06",
          title: "美国作家、哲学家，超验主义代表人物亨利·戴维·梭罗逝世",
        },
        {
          year: "1868",
          month: "05",
          day: "06",
          title: "俄罗斯帝国沙皇尼古拉二世出生",
        },
        {
          year: "1882",
          month: "05",
          day: "06",
          title: "德意志帝国末代皇储威廉皇储出生",
        },
        {
          year: "1889",
          month: "05",
          day: "06",
          title: "英国发行了世界上最早的邮票——黑便士邮票",
        },
        {
          year: "1910",
          month: "05",
          day: "06",
          title: "英国国王爱德华七世逝世",
        },
        {
          year: "1935",
          month: "05",
          day: "06",
          title: "罗斯福新政公共事业振兴署成立",
        },
        {
          year: "1967",
          month: "05",
          day: "06",
          title: "中国文学家周作人逝世",
        },
        {
          year: "2001",
          month: "05",
          day: "06",
          title: "人类第一个太空游客安全返回人类",
        },
        {
          year: "2008",
          month: "05",
          day: "06",
          title: "胡锦涛主席受邀访问日本，开启了中日“破冰之旅”",
        },
      ],
      obj: {
        name: "zhangsan",
        age: 18,
        height: 1.88,
      },
      // 接收input输入的 变量
      message: "",
      // 账号
      account: "",
      // 密码
      pwd: "",
      value: "",
    };
  },
  methods: {
    login() {
      let params = {
        account: this.account,
        pwd: this.pwd,
      };
      console.log(params);
      // axios
    },
  },
};
</script>

<style scoped>
</style>